import React from 'react';
// import PropTypes from 'prop-type';
import {connect} from 'react-redux';

const TodoItem = ({onToggle, onRemove, completed, text}) => (
    <li className="todo-item" style={{
        textDecoration: completed ? 'line-through' : 'none'
    }}>
        <input type="checkbox" className="toggle" checked={completed ? "checked" : ""} readOnly onClick={onToggle}/>
        <label className="text">{text}</label>
        <button className="remove" onClick={onRemove}>X</button>
    </li>
);
// TodoItem.propTypes = {
//     onToggle: PropTypes.func.isRequired,
//     onRemove: PropTypes.func.isRequired,
//     completed: PropTypes.bool.isRequired,
//     text: PropTypes.string.isRequired
// };
const maoDispatchToProps = (dispatch, ownProps) => ({
    onToggle: () => ownProps.onToggle(ownProps.id)
});
export default connect(maoDispatchToProps,null)(TodoItem);